import {Tabs} from 'antd'
import React, { useState, useRef} from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, Link } from 'umi'
import { queryPromotionList} from '../service'
import moment from 'moment';
import { promotionTypeList, promotionStatusEnum } from '@/utils/constant'

const TableList = () => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const actionRef3 = useRef()
  const [tabIndex, setTabIndex] = useState("1")
  const  { TabPane } = Tabs;
  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      key:'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key:'name',
      width:60,
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '申请日期',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '变动类型',
      dataIndex: 'promotionType',
      hideInSearch: true,
      render: (text) => {
        const res = promotionTypeList.find((item) => item.value === parseInt(text));
        return res ? res.label : text
      },
    },
    {
      title: '所属部门',
      hideInSearch: true,
      dataIndex: 'beforeUnitName',
      key:'beforeUnitName'
    },
    {
      title: '现任岗位',
      hideInSearch: true,
      dataIndex: 'beforeJobName',
      key:'beforeJobName'
    },
    {
      title: '现职级',
      dataIndex: 'beforeJobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升部门',
      dataIndex: 'afterUnitName',
      hideInSearch: true,
    },
    {
      title: '申请晋升岗位',
      dataIndex: 'afterJobName',
      hideInSearch: true,
    },
    {
      title: '申请晋升职级',
      dataIndex: 'afterJobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升日期',
      dataIndex: 'promotionDate',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '审批状态',
      dataIndex: 'status',
      key:'status',
      hideInSearch: true,
      valueEnum: promotionStatusEnum
    },
  ];

  if(tabIndex === '3'){
    columns.push({
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {(record.status === 3) && <><a onClick={() => window.open(record.checkUrl)}>审批详情</a></>}
        </>
      ),
    })
  }

  const callback = (key) => {
    setTabIndex(key)
    if(key === '1'){
      actionRef.current &&  actionRef.current.reload();
    }else if(key === '2'){
      actionRef2.current && actionRef2.current.reload();
    }else{
      actionRef3.current && actionRef3.current.reload();
    }
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={callback}>
        <TabPane tab="待发起" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="promotionId"
            request={(params) => queryPromotionList(params,tabIndex,2)}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="审批中" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="promotionId"
            request={(params) => queryPromotionList(params,tabIndex,2)}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已完成" key="3">
          <ProTable
            actionRef={actionRef3}
            rowKey="promotionId"
            request={(params) => queryPromotionList(params,tabIndex,2)}
            columns={columns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
}

export default connect(({  }) => ({
}))(TableList)
